<!--
  module - 系统配置--- 编码库

  @author liuhx 2020-04-28
-->
<template>
  <div class="mixin-components-container">
    <el-col :span="24">
      <el-card>

        <div slot="header" class="clearfix">
          <template>
            <el-page-header content="编辑编码库" @back="goBack" />
          </template>
        </div>
        <div>
          <div>
            <div style="margin-bottom:50px;">
              <el-form ref="form" :model="form" :rules="rules" label-width="140px" style="padding: 25px 0;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="codeKey" label="编码名称">
                      <el-input v-model="form.codeKey" placeholder="请填写编码名称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="label" label="编码说明">
                      <el-input v-model="form.label" placeholder="请填写编码说明" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="5">
                    <el-form-item label="编码" prop="enumVal">
                      <el-input v-model="form.enumVal" type="textarea" :rows="10" placeholder="输枚举编码" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" style="margin-left: -140px;">
                    <el-form-item prop="enumTxt">
                      <el-input v-model="form.enumTxt" type="textarea" :rows="10" placeholder="输入枚举内容" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <el-row style="padding-left:140px;">

                <el-link type="primary" size="mini" @click="submitForm('form')">
                  保存
                </el-link>

                <!-- <el-button waves type="primary" >保存</el-button> -->
                <!-- <el-button waves type="info" >取消</el-button> -->
                <el-link type="info" size="mini" @click="goBack">
                  取消
                </el-link>
              </el-row>
            </div>

          </div>
        </div>

      </el-card>
    </el-col>
  </div>
</template>
<script>

// api
import { querySysConfigCodeList, saveSysConfigCode, querySysConfigCodeByKey } from '@/api/sys/sysConfig'

// 水波纹插件
import waves from '@/directive/waves'

export default {
  name: 'SysCode',
  directives: { waves },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: false,
      oldCodeKey: '',
      listQuery: {
        page: 1,
        limit: 10,
        codeKey: ''
      },
      form: {
        codeKey: '',
        label: '',
        enumVal: '',
        enumTxt: ''
      },
      rules: {
        codeKey: [
          { required: true, message: '请输入编码名称', trigger: 'blur' }
        ],
        label: [
          { required: true, message: '请输入编码说明', trigger: 'blur' }
        ],
        enumVal: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        enumTxt: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const curVue = this
    this.oldCodeKey = this.$route.query.data.codeKey
    console.log(this.$route.query.type)
    if (this.$route.query.type === 2) {
      this.form.codeKey = this.$route.query.codeKey
      this.form.label = this.$route.query.label
      const query = {
        codeKey: this.oldCodeKey
      }
      querySysConfigCodeByKey(query).then(res => {
        let val = ''
        let txt = ''
        if (res.code === 1) {
          for (const item of res.data.sysConfigCodeList) {
            val = val + item.enumVal + '\n'
            txt = txt + item.enumTxt + '\n'
          }
          curVue.form.label = res.data.sysConfigCodeList[0].label
          curVue.form.codeKey = res.data.sysConfigCodeList[0].codeKey
          curVue.form.enumVal = val
          curVue.form.enumTxt = txt
        }
      })
    }

    this.querySysConfigCodeList()
  },
  methods: {
    querySysConfigCodeList() {
      const curVue = this
      querySysConfigCodeList(this.listQuery).then(res => {
        if (res.code === 1) {
          curVue.listLoading = false
          curVue.list = res.data.sysConfigCodeList
          curVue.total = res.data.sysConfigCodeList.length
        } else {
          curVue.noticeUtil.errorMsg('编码库获取失败！')
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    submitForm(formName) {
      const query = {
        oldCodeKey: this.oldCodeKey,
        codeKey: this.form.codeKey,
        label: this.form.label,
        enumVal: this.form.enumVal,
        enumTxt: this.form.enumTxt
      }
      debugger
      let val = this.form.enumVal.split(/[(\r\n)\r\n]+/)
      let txt = this.form.enumTxt.split(/[(\r\n)\r\n]+/)
      val = this.notempty(val)
      txt = this.notempty(txt)
      if (val.length !== txt.length) {
        this.noticeUtil.errorMsg('编码值与编码名称不对应！')
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveSysConfigCode(query).then(res => {
            if (res.code === 1) {
              console.log(1)
              this.noticeUtil.successMsg('操作成功!')
              this.$router.go(-1)
            } else {
              this.noticeUtil.errorMsg('操作失败!')
            }
          })
        } else {
          return false
        }
      })
    },
    notempty(str) {
      for (var i = 0; i < str.length; i++) {
        if (str[i] === '' || str[i] == null || typeof (str[i]) === undefined) {
          str.splice(i, 1)
          i = i - 1
        }
      }
      return str
    }
  }
}

</script>

